<template>
  <div>
    <van-nav-bar
      title="地图找房"
      left-arrow
      @click-left="$router.back()"
    />
    <baidu-map class="map-house"
      :center="center"
      :zoom="zoom"
      @ready="initMap"
      :scroll-whell-zoom="true"
      >
    </baidu-map>
      <van-popup
        v-model="show"
        :overlay="false"
        duration="0.5"
        position="bottom"
        >
        <van-cell title="房屋列表" value="更多房源"  size="large" is-link to="/layout/house"/>
        <HouseList :areaId="areaId"></HouseList>
      </van-popup>
  </div>
</template>

<script>
import HouseList from '@/views/Second/House/Child/HouseList'
import { getMapHouseApi } from '@/api'
export default {
  components: {
    HouseList
  },
  data () {
    return {
      areaId: localStorage.getItem('cityValue'),
      options: null,
      center: { // 经纬度
        lng: 0,
        lat: 0
      },
      zoom: 12, // 地图展示级别
      BMap: null, // 百度地图对象
      map: null, // 百度地图实例
      show: false// 弹出层
    }
  },
  methods: {
    async getApi () {
      const res = await getMapHouseApi(this.areaId)
      this.options = res.data.body
    },
    async initMap ({ BMap, map }) {
      this.$toast.loading()
      const res = await getMapHouseApi(this.areaId)
      // await this.getApi()
      this.BMap = BMap
      this.map = map
      this.options = res.data.body
      this.options.forEach(item => {
        this.$set(this.center, 'lng', item.coord.longitude)
        this.$set(this.center, 'lat', item.coord.latitude)
        var point = new BMap.Point(item.coord.longitude, item.coord.latitude)
        var content = item.label + '<br>' + item.count + '套'
        var label = new BMap.Label(content, { // 创建文本标注
          position: point,
          offset: new BMap.Size(10, 20)
        })
        map.addOverlay(label) // 将标注添加到地图中
        label.setStyle({ // 设置label的样式
          boxSizing: 'border-box',
          width: '70px',
          height: '70px',
          padding: '18px 0 6px',
          textAlign: 'center',
          fontSize: '12px',
          color: '#fff',
          backgroundColor: '#0cb56ae6',
          border: '2px solid #FFF',
          borderRadius: '50%'
        })
        label.addEventListener('click', () => {
          // console.log(item.value)
          this.areaId = item.value
          if (item.count === 1) {
            console.log(this.areaId)
            this.show = true
          }
          this.initMap({ BMap, map })
          this.zoom++
        })
      })
      // 将点添加到地图上
      this.$toast.clear()
    }
  }
}
</script>

<style lang="less" scoped>
.map-house {
  width:375px;
  height: 620px;
}
</style>
